<template>
    <el-dialog custom-class="my-dialog" title="用户登录" :visible="isLoginVisible" width="400px">
        <el-form status-icon ref="refruleForm" :rules="rules" :model="ruleForm" label-width="60px" size="small">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="账号" prop="userid">
                        <el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
                <span>没有账号？立即<span style="color: #6bd9ff" @click.stop="toRegister">注册</span></span>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeViews" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
              </span>
        </template>
    </el-dialog>
</template>
<script>
import Cookie from 'js-cookie'
import {reactive, ref, toRefs} from '@vue/reactivity'
import {ElMessage} from 'element-plus'
import UserApi from '../Api/user2'
import md5 from "js-md5";

export default {
    model: {
        value: 'isLoginVisible',
        events: 'closeViews'
    },
    props: {
        isLoginVisible: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const form = reactive({
            ruleForm: {
                account: '',
                password: ''
            }
        })
        // 定义校验规则 表单代码中必须以 :rules 接收
        const rules = {
            password: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }],
            email: [{
                type: 'email',
                required: true,
                message: '请输入正确的邮箱',
                trigger: 'blur'
            }]
        }
        const refruleForm = ref(null)
        // 确定按钮的格式
        const submitForm = () => {
            console.log('login button')
            refruleForm.value.validate((valid) => {
                if (valid) {
                    const formData = {...form.ruleForm}
                    const user = {
                        account: formData.account,
                        password: md5(formData.password)
                    }
                    UserApi.login2(user).then((res) => {
                        UserApi.current().then(res => {
                            context.emit('setUser')
                        })
                        ElMessage.success('登录成功')
                        closeViews()
                    }).catch((err) => {
                        if (err.code === 210) {
                            ElMessage.error('账号或密码不正确')
                        } else if (err.code === 211) {
                            console.log("account not existed, maybe you need register")
                            // Api.register(formData).then((res) => {
                            //     Cookie.set('userInfo', JSON.stringify(res.body.userInfo))
                            //     context.emit('setUser')
                            //     ElMessage.success('注册成功')
                            //     closeViews()
                            // })
                        }
                    })
                }
            })
        }

        // 关闭弹窗
        const closeViews = () => {
            refruleForm.value.resetFields()
            context.emit('closeViews', false)
        }

        // 转至注册
        const toRegister = () => {
            console.log('click-toRegister')
            refruleForm.value.resetFields()
            context.emit('toRegister')
        }

        return {
            ...toRefs(form),
            closeViews,
            toRegister,
            submitForm,
            refruleForm,
            rules
        }
    }
}
</script>

<style scoped lang="scss">
.my-dialog {
    background: red;
}

.my-dialog /deep/ .el-dialog__header {
    border-bottom: 1px solid #eee !important;
}

.my-dialog /deep/ .el-dialog__title {
    font-size: 16px;
    color: #e03b5d;
}
</style>
